// 根据id查询图片信息
// 获取路由参数
import { use } from "react";
import Image from "next/image";
import { AlbumDetailType } from "@/types/album";
import { api } from "@/lib/api";

function AlbumPage({ params }: { params: { id: string } }) {
  const awaitedParams = use((async () => await params)());

  async function getAlbumDetail(id: string) {
    const res = await fetch(await api(`/api/albumDetail/${id}`));
    if (!res.ok) {
      return null;
    }
    return res.json();
  }

  let albumDetail: AlbumDetailType | null = null;
  if (awaitedParams.id) {
    albumDetail = use(getAlbumDetail(awaitedParams.id));
    console.log(albumDetail);
  }

  return (
    <div>
    {albumDetail ? (
      <div className="max-w-md mx-auto mt-8 p-6 rounded-lg border shadow-sm bg-white space-y-4">
        <div className="w-full flex justify-center">
          <Image
            src={albumDetail.src}
            alt={albumDetail.alt}
            width={400}
            height={600}
            className="rounded-lg object-cover max-h-80"
          />
        </div>
        <div className="space-y-2">
          <h2 className="text-2xl font-bold">{albumDetail.title}</h2>
          <p className="text-gray-500 text-sm">{albumDetail.date}</p>
          <p className="text-gray-700">{albumDetail.description}</p>
        </div>
      </div>
    ) : (
      <div className="text-center text-red-500 mt-8">未找到该图片信息</div>
    )}
    </div>
  );
}

export default AlbumPage;
